import { useEffect, useRef, useState } from 'react';
import VideoJS from '../videoJS';
import { Row, Col, Carousel, Image, Typography } from 'antd';
import classNames from 'classnames';
import { SlickArrowLeft, SlickArrowRight } from '../slickArrow';
import styles from './index.less';
const { Text, Paragraph } = Typography;

const classInfo = {
  data: {
    result: {
      id: 1096,
      bjNo: 'xjwdsxx0201',
      bjName: '二年级一班',
      bjMaster: 'xjwdsxx009',
      bjStCount: 0,
      addOn: '2017-11-08 11:44:21',
      addBy: 'xjwdsxx',
      gradeGroup: 3,
      flagDelete: 0,
      isTopClass: 0,
      xxNo: '150622zgeqxjwdsxx',
      classBadge: 'http://demo-assets.iwisesoft.com/classBadge/150622zgeqxjwdsxx/xjwdsxx0201.jpg',
      classMotto: '自立\n自强\n自信\n自主\n积极\n向上',
      masterName: '白俊红',
      xxName: '测试学校',
      gradeGroupName: '三年级',
      cultures: [
        {
          type: 'image',
          url: 'http://demo-assets.iwisesoft.com/class_culture/150622zgeqxjwdsxx/xjwdsxx0201/E8AE1590-B5F0-4B73-98E6-F07AE05F65AA.jpeg',
          preview:
            'http://demo-assets.iwisesoft.com/class_culture/150622zgeqxjwdsxx/xjwdsxx0201/E8AE1590-B5F0-4B73-98E6-F07AE05F65AA.jpeg',
        },
        {
          type: 'image',
          url: 'http://demo-assets.iwisesoft.com/class_culture/150622zgeqxjwdsxx/xjwdsxx0201/ED91F0E5-B80E-475B-A828-670CD8494965.jpeg',
          preview:
            'http://demo-assets.iwisesoft.com/class_culture/150622zgeqxjwdsxx/xjwdsxx0201/ED91F0E5-B80E-475B-A828-670CD8494965.jpeg',
        },
      ],
      rules: null,
      idNe: 0,
      idList: null,
    },
  },
};
export default () => {
  return (
    <div className={classNames('class-culture-wrapper', styles.wrapper)}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
        <Col flex="52px">
          <Row
            className={classNames('class-culture-title', styles.title)}
            justify="center"
            onClick={() => setModalVisible(true)}
          >
            <img
              src={
                classInfo.data?.result
                  ? classInfo.data.result.classBadge
                  : 'https://image.iwisesoft.com/system/class_badge.png'
              }
              style={{ display: 'block' }}
            />
            <span style={{ marginLeft: 10 }}>班级文化</span>
          </Row>
        </Col>
        <Col flex="auto" style={{ padding: '30px 0 30px 0' }}>
          <Row>
            <Col span={12}>
              <Row justify="center" className={styles.motto}>
                <Paragraph
                  ellipsis={{
                    rows: 7,
                    expandable: true,
                    symbol: '更多',
                    onExpand: (e) => {
                      setparagraphKey(new Date().getTime());
                      setTooltipOpen(true);
                    },
                  }}
                  style={{ color: 'inherit', width: 180, marginBottom: 0 }}
                >
                  {classInfo.data?.result?.classMotto}
                </Paragraph>
              </Row>
            </Col>
            <Col span={12}>
              <Row justify="center" className={styles.cultureContent}>
                <Col id="culture_slider">
                  <div className="shadow-mask" />
                  <Image.PreviewGroup>
                    <Carousel
                      autoplay
                      autoplaySpeed={5000}
                      dots={false}
                      arrows
                      prevArrow={<SlickArrowLeft />}
                      nextArrow={<SlickArrowRight />}
                    >
                      {classInfo.data?.result?.cultures?.map((x, i) => {
                        if (x.type === 'image') {
                          return (
                            <div key={x.url}>
                              <Row justify="center">
                                <Image
                                  width={150}
                                  height={150}
                                  src={x.preview || x.url}
                                  preview={{ src: x.url }}
                                />
                              </Row>
                            </div>
                          );
                        }
                        return (
                          <VideoJS
                            key={x.url}
                            autoPlay="autoplay"
                            width={150}
                            height={150}
                            src={x.url}
                            loop="loop"
                            muted="muted"
                          />
                        );
                      })}
                    </Carousel>
                  </Image.PreviewGroup>
                </Col>
              </Row>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};
